<template>
  <div class="groupon-block-panel">
    <el-form label-width="80px" size="small">
      <!-- 基础设置 -->
      <el-form-item label="标题">
        <el-input v-model="localData.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item label="每行数量">
        <el-slider
          v-model="localData.columns"
          :min="1"
          :max="3"
          show-stops
        ></el-slider>
      </el-form-item>

      <el-form-item label="间距">
        <el-slider
          v-model="localData.margin"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <el-form-item label="内边距">
        <el-slider
          v-model="localData.padding"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <el-form-item label="圆角">
        <el-slider
          v-model="localData.borderRadius"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <el-form-item label="商品圆角">
        <el-slider
          v-model="localData.itemBorderRadius"
          :min="0"
          :max="20"
        ></el-slider>
      </el-form-item>

      <!-- 显示设置 -->
      <el-divider content-position="left">显示设置</el-divider>

      <el-form-item label="显示进度条">
        <el-switch v-model="localData.showProgress"></el-switch>
      </el-form-item>

      <el-form-item label="显示更多">
        <el-switch v-model="localData.showMore"></el-switch>
      </el-form-item>

      <!-- 背景设置 -->
      <el-divider content-position="left">背景设置</el-divider>

      <el-form-item label="背景色">
        <el-color-picker v-model="localData.backgroundColor"></el-color-picker>
      </el-form-item>

      <el-form-item label="商品背景">
        <el-color-picker v-model="localData.itemBackgroundColor"></el-color-picker>
      </el-form-item>

      <!-- 商品管理 -->
      <el-divider content-position="left">商品管理</el-divider>

      <el-form-item>
        <el-button type="primary" @click="showGoodsDialog = true">管理商品</el-button>
      </el-form-item>
    </el-form>

    <!-- 商品管理对话框 -->
    <el-dialog
      v-model="showGoodsDialog"
      title="拼团商品管理"
      width="70%"
    >
      <div class="goods-manager">
        <el-button type="primary" @click="addGoods">添加商品</el-button>

        <el-table :data="localData.grouponGoods" style="width: 100%; margin-top: 10px;">
          <el-table-column label="图片" width="120">
            <template #default="scope">
              <el-image
                style="width: 80px; height: 80px"
                :src="scope.row.image"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column label="标题" prop="title"></el-table-column>

          <el-table-column label="拼团价" width="120">
            <template #default="scope">
              ¥{{ scope.row.grouponPrice }}
            </template>
          </el-table-column>

          <el-table-column label="原价" width="120">
            <template #default="scope">
              ¥{{ scope.row.originalPrice }}
            </template>
          </el-table-column>

          <el-table-column label="折扣" width="100">
            <template #default="scope">
              {{ scope.row.discount }}折
            </template>
          </el-table-column>

          <el-table-column label="拼团人数" width="100">
            <template #default="scope">
              {{ scope.row.groupPeople }}人
            </template>
          </el-table-column>

          <el-table-column label="已拼团数" width="100">
            <template #default="scope">
              {{ scope.row.groupCount }}团
            </template>
          </el-table-column>

          <el-table-column label="进度" width="100">
            <template #default="scope">
              {{ scope.row.progress }}%
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editGoods(scope.$index)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteGoods(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showGoodsDialog = false">取消</el-button>
          <el-button type="primary" @click="saveGoods">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 商品编辑对话框 -->
    <el-dialog
      v-model="showGoodsEditDialog"
      :title="isEditingGoods ? '编辑商品' : '添加商品'"
      width="50%"
    >
      <el-form :model="currentGoods" label-width="80px">
        <el-form-item label="商品图片">
          <el-upload
            class="goods-uploader"
            action="#"
            :show-file-list="false"
            :before-upload="beforeImageUpload"
          >
            <img v-if="currentGoods.image" :src="currentGoods.image" class="goods-image" />
            <el-icon v-else class="goods-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品标题">
          <el-input v-model="currentGoods.title" placeholder="请输入商品标题"></el-input>
        </el-form-item>

        <el-form-item label="拼团价格">
          <el-input-number v-model="currentGoods.grouponPrice" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="原价">
          <el-input-number v-model="currentGoods.originalPrice" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="折扣">
          <el-input-number v-model="currentGoods.discount" :precision="1" :step="0.1" :min="0.1" :max="9.9"></el-input-number>
        </el-form-item>

        <el-form-item label="拼团人数">
          <el-input-number v-model="currentGoods.groupPeople" :min="2"></el-input-number>
        </el-form-item>

        <el-form-item label="已拼团数">
          <el-input-number v-model="currentGoods.groupCount" :min="0"></el-input-number>
        </el-form-item>

        <el-form-item label="拼团进度">
          <el-slider
            v-model="currentGoods.progress"
            :min="0"
            :max="100"
            show-input
          ></el-slider>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showGoodsEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveCurrentGoods">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data'])

// 本地数据
const localData = ref({})
const showGoodsDialog = ref(false)
const showGoodsEditDialog = ref(false)
const isEditingGoods = ref(false)
const editingIndex = ref(-1)
const currentGoods = ref({
  image: '',
  title: '',
  grouponPrice: 0,
  originalPrice: 0,
  discount: 5,
  groupPeople: 2,
  groupCount: 0,
  progress: 0
})

// 初始化数据
onMounted(() => {
  localData.value = { ...props.data }
})

// 监听数据变化
watch(() => props.data, (newVal) => {
  localData.value = { ...newVal }
}, { deep: true })

// 监听本地数据变化
watch(localData, (newVal) => {
  emit('update:data', newVal)
}, { deep: true })

// 添加商品
function addGoods() {
  currentGoods.value = {
    image: '',
    title: '',
    grouponPrice: 0,
    originalPrice: 0,
    discount: 5,
    groupPeople: 2,
    groupCount: 0,
    progress: 0
  }
  isEditingGoods.value = false
  showGoodsEditDialog.value = true
}

// 编辑商品
function editGoods(index) {
  currentGoods.value = { ...localData.value.grouponGoods[index] }
  editingIndex.value = index
  isEditingGoods.value = true
  showGoodsEditDialog.value = true
}

// 保存当前商品
function saveCurrentGoods() {
  if (!isEditingGoods.value) {
    // 添加新商品
    if (!localData.value.grouponGoods) {
      localData.value.grouponGoods = []
    }
    localData.value.grouponGoods.push({ ...currentGoods.value })
  } else {
    // 更新现有商品
    localData.value.grouponGoods[editingIndex.value] = { ...currentGoods.value }
  }

  showGoodsEditDialog.value = false
}

// 删除商品
function deleteGoods(index) {
  localData.value.grouponGoods.splice(index, 1)
}

// 保存商品列表
function saveGoods() {
  showGoodsDialog.value = false
}

// 图片上传前处理
function beforeImageUpload(file) {
  // 这里应该上传到服务器，现在只是模拟
  const reader = new FileReader()
  reader.onload = (e) => {
    currentGoods.value.image = e.target.result
  }
  reader.readAsDataURL(file)
  return false // 阻止自动上传
}
</script>

<style lang="scss" scoped>
.groupon-block-panel {
  .goods-manager {
    .goods-uploader {
      :deep(.el-upload) {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: 0.2s;

        &:hover {
          border-color: #409eff;
        }
      }

      .goods-image {
        width: 100px;
        height: 100px;
        display: block;
        object-fit: cover;
      }

      .goods-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
      }
    }
  }
}
</style>
